import React, { useState } from 'react';
import Icon from "@/components/common/icon";
const { PrevSong, NextSong, Played, Playing,  Order , List, OneSong, Random, ClosedLyrics, Lyrics} = Icon;

export default function Control() {
  const [play, setPlay] = useState(false);
  const [loop, setLoop] = useState(0); // 播放模式 0: 顺序播放 1:列表循环 2:单曲循环 3: 随机播放
  const [isShowLyrics, setShowLyrics] = useState(false);

  const loopContent = (status) => {
    switch (status) {
      case 0:
        return (
          <Order size={18} />
        );
      case 1:
        return (
          <List size={18} />
        );
      case 2:
        return (
          <OneSong size={18} />
        );
      case 3:
        return (
          <Random size={18} />
        );
    }
  }
  const switchPlay = () => {
    setPlay(!play);
  };
  const changeLoop = () => {
    if (loop === 3) {
      setLoop(0)
    } else {
      const newLoop = loop + 1
      setLoop(newLoop)
    }
  };
  const changeLyrics = () => {
    setShowLyrics(!isShowLyrics);
  }
  return (
    <div className="play-control">
      <div className="icon-btn">
        <div className="loop" onClick={() => changeLoop()}>
          { loopContent(loop) }
        </div>
      <PrevSong size={18} />
        <div className="music-play" onClick={() => switchPlay()}>
          { play ? <Playing size={36} /> : <Played size={36} />}
        </div>
        <NextSong size={18} />
        <div className="lyrics" onClick = {() => changeLyrics()}>
          { !isShowLyrics ? <ClosedLyrics size={18} /> : <Lyrics size={18} />}
        </div>
      </div>
    </div>
  )
}
